<template>
  <div class="accountListMonth">
    <div class="fixed-header">
      <tab :line-width="2" v-model="index" custom-bar-width="1.5rem">
        <tab-item
          @on-item-click="changeIndex"
          :key="index"
          v-for="(item, index) in tabName"
        >{{ item }}</tab-item>
      </tab>
    </div>
    <div style="margin-top: 2rem;">
      <div v-if="index == 1">
        <group style="margin-top: 0.15rem;">
          <cell>
            <i class="icon icon-rili" style="font-size: 0.32rem;" @click="showYear = true"></i>
          </cell>
        </group>
      </div>
      <div v-if="isLoading">
        <group v-for="(item, idx) in accountData" :key="index" style="margin-top: 0.15rem;" @click.native="toDay(idx)">
          <cell :title="index == '1'?item.year + '年' : item.month + '月'" style="font-size: 0.32rem;">
            <p class="text-green f26">总结余: {{ item.money_total }}元</p>
          </cell>
          <cell>
            <p class="f26">
              派单{{ item.pai_num }}次
              接单{{ item.qiang_num }}次
              提现{{ item.cash_num }}次
            </p>
          </cell>
        </group>
      </div>
      <load-more tip="加载数据中..." v-if="!isLoading"></load-more>
      <div class="null" v-if="isLoading && !accountData.length">
        暂无账单
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showYear">
        <div class="popup0">
          <div class="picker-btn">
            <div style="height: 0.9rem; padding-right: 0.5rem;" @click="showYear = false">取消</div>
            <div style="color: #222; font-size: 0.32rem;"></div>
            <div class="text-orange" style="height: 0.9rem;padding-left: 0.5rem;" @click="handleYear">确定</div>
          </div>
          <picker :data="years" v-model="year" :columns=1></picker>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import { LoadMore, Cell, GroupTitle, TransferDom } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    components: {
      PubHeader,
      LoadMore,
      Cell,
      GroupTitle
    },
    computed: {
      tabName() {
        return ['月账单', '年账单']
      },
      years() {
        let years1 = []
        const date = new Date()
        const j = parseInt(date.getFullYear())
        for (var i = 2014; i <= j; i++) {
          years1.push({
            name: i + '年',
            value: i + ''
          })
        }
        return years1
      }
    },
    data() {
      return{
        showYear: false,
        isLoading: false,
        accountData: [],
        index: 0,
        url: [
          $config.host + '/api/Account/getUserBillYearMonth',
          $config.host + '/api/Account/getUserBillYear'
        ],
        year: ['']
      }
    },
    created() {
      const date = new Date()
      this.year[0] = date.getFullYear() + ''
      this.getData()
    },
    methods: {
      getData() {
        this.accountData = []
        this.$http.post(this.url[this.index], qs.stringify({
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          bill_year: this.year[0]
        })).then(res => {
          const {code, data, msg} = res.data
          this.isLoading = true
          if(code == '1' && data.data_list) {
            this.accountData = data.data_list

          } else {
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch(err => {
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      toDay(index) {
        if(this.index == 1) {
          this.year[0] = this.accountData[index].year
          this.index = 0
          this.getData()
        } else {
          this.$router.push({name: 'accountListDay', query: {month: parseInt(this.accountData[index].month)}})
        }
      },
      changeIndex() {
        this.getData()
      },
      handleYear() {
        this.showYear = false
        this.getData()
      }
    }
  }
</script>
<style scoped>

</style>
